<template>
  <div class="menu">
    <PageTable
      :pageTableConfig="pageTableConfig"
      pageName="menu"
      title="菜单"
      @newBtnClick="newBtnClick"
      @editBtnClick="editBtnClick"
    ></PageTable>
    <PageModel
      @changeIsHidden="changeIsHidden"
      :defaultInfo="defaultInfo"
      ref="pageModelRef"
      pageName="menu"
      :modelConfig="pageModelConfig"
      title="菜单"
      :creatOrEdit="creatOrEdit"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import PageTable from '@/components/PageTable/PageTable.vue'
import { pageModelConfig } from './pageModelConfig'
import { pageTableConfig } from './pageTableConfig'
import PageModel from '@/components/PageModel/PageModel.vue'
import { usePageModel } from '@/hooks/usePageModel'

export default defineComponent({
  components: {
    PageTable,
    PageModel
  },
  setup() {
    const pageName = 'menu'
    const [pageModelRef, defaultInfo, newBtnClick, editBtnClick, creatOrEdit] =
      usePageModel(undefined, undefined, pageModelConfig, pageName)

    const changeIsHidden = (val: any) => {
      if (val === '一级菜单') {
        for (const i of pageModelConfig.formItems) {
          if (i.field === 'permission' || i.field === 'parentId') {
            i.isHidden = true
          }
          if (i.field === 'icon' || i.field === 'url') {
            i.isHidden = false
          }
        }
      } else if (val === '二级菜单') {
        for (const i of pageModelConfig.formItems) {
          if (i.field === 'icon' || i.field === 'permission') {
            i.isHidden = true
          }
          if (i.field === 'url' || i.field === 'parentId') {
            i.isHidden = false
          }
        }
      } else {
        for (const i of pageModelConfig.formItems) {
          if (i.field === 'icon' || i.field === 'url') {
            i.isHidden = true
          }
          if (i.field === 'permission' || i.field === 'parentId') {
            i.isHidden = false
          }
        }
      }
    }

    return {
      creatOrEdit,
      changeIsHidden,
      pageTableConfig,
      pageModelConfig,
      newBtnClick,
      editBtnClick,
      pageModelRef,
      defaultInfo
    }
  }
})
</script>

<style scoped></style>
